<template>
    <!-- 最大盒子 -->
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'发薪记录'" :autoBack="true" leftIconColor="$uni-text-color"
        :bgColor="'#ffffff'" :titleStyle="{ color: '$uni-text-color', fontSize: '32rpx', fontWeight: '600' }">
        <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }" v-if="list.length">
            <view class="item" v-for="(item,index) in list" :key="index">
                <fui-overflow-hidden class="title" :text="item.name" :rows="2"></fui-overflow-hidden>
                <view class="time">
                    <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/laowupaiqian_icon_time2@2.png`"
                    mode="scaleToFill" />
                    <view>加入时间：{{ formatDate(item.create_time) }}</view>
                </view>
                <view class="link"  @tap="skipDetails(item)">
                    <view class="blue">查看详情</view>
                    <u-icon size="12" name="arrow-right" color="#333"></u-icon>
                </view>
            </view>
        </view>
        <u-empty v-else mode="list"  icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty> 
        <!-- 正在加载组件 -->
        <view>
            <s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
        </view>
    </s-layout>
</template>
<script setup>
    import { baseUrl } from '@/sheep/config';
    import { onLoad,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app";
    import {  ref, computed } from "vue";
    import sheep from "@/sheep";
    import { formatDate } from '@/utils/fn.js';
    const userInfo = computed(() => sheep.$store('user').userInfo);
    // 获取系统信息
    const { safeAreaInsets } = uni.getSystemInfoSync();

    onLoad((option) => {
        getDepartment()
    });
    // 发新记录请求数据
    const list = ref([])
    const page = ref(1)
    const current_page = ref()
    const last_page = ref()
    const getDepartment = async () => {
        let params = {
            page:page.value
        }
        const res = await sheep.$api.app.getUserRespomsibleList(params);
        current_page.value = res.data.current_page
        last_page.value = res.data.last_page
        list.value =  [...list.value, ...res?.data.rows];
    }
    //跳转页面
    const skipDetails = (e)=>{
        sheep.$router.go('/subpackage/staff/user/payroll_record/payroll_record_list', {
            tags: e.name,
            department_id:e.id
        })
    }

    onPullDownRefresh(() => {
        list.value = []
        page.value = 1
        getDepartment()
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 500);
    })

    const loadmoreRef = ref()
    onReachBottom((e)=>{
        loadmoreRef.value.PopupScrolltolower() // 加载更多
        if (current_page.value < last_page.value) {
            page.value += 1;
                // checkAll.value = false
                // selectedIds.value = []
                // selectedSalay.value = []
                // list.value.forEach(item => {
                //     item.list.forEach((element, index) => {
                //         element.is_selected = false
                        
                //     });
                // });
        } else {
            return;
        }
        getDepartment()
    })

</script>

<style scoped lang="scss">
page {
    width: 100%;
    height: 100%;
}
.max_box{
    width: calc(100% - 40rpx);
    margin: 20rpx auto;
    .item{
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
        margin-bottom: 20rpx;
        padding:0 30rpx;
        .title{
            padding-top: 40rpx;
            display: flex;
            align-items: center;
            color: #333333;
            font-weight: 500;
            font-size: 36rpx;
        }
        .time{
            height: 50rpx;
            display: flex;
            margin-top: 10rpx;
            margin-bottom: 20rpx;
            align-items: center;
            image{
                width: 26rpx;
                height: 26rpx;
            }
            view{
                margin-left: 10rpx;
                color: #666666;
                font-weight: 400;
                font-size: 24rpx;
            }
        }
    
        .link{
            height: 84rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1rpx solid #efefef;
            padding: 0 20rpx;
            .blue{
                color: #0038F7;
                font-weight: 500;
                font-size: 24rpx;
            }
        }
    }
}
</style>